<template>
  <div class="CompanyList">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
      >
      </c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        showPagination
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
        <!-- 表格自定义部分 -->
        <!-- 业务方向 -->
        <template slot="companyDirection" slot-scope="row">
           <a-tag
            :color="$dealDic(businessIdentity,row.tableRow,'tagColor')"
          >{{$dealDic(businessIdentity,row.tableRow,'label')}}</a-tag>
        </template>
        <!-- 审核状态 -->
        <template slot="auditState" slot-scope="row">
          <a-tag
            :color="$dealDic(auditStatus,row.tableRow,'tagColor')"
          >{{$dealDic(auditStatus,row.tableRow,'label')}}</a-tag>
        </template>
        <template slot="createDate" slot-scope="row">
          <span>{{ $getTime(row.tableRow) }}</span>
        </template>
        <!-- 表格操作按钮 -->
        <template slot="handle" slot-scope="row">
          <a @click="onView(row.tableRow)"><a-icon type="eye" /> 查看</a>
        </template>
      </c-table>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";
import { auditStatus} from "@/dict/company";
import { businessIdentity} from "@/dict/public";

export default {
  name: "CompanyList",
  components: {},
  data() {
    return {
      auditStatus,
      businessIdentity,
      tableSearchForm: {
        searchKey: "",
        auditState: ""
      },
      tableSearchFormData: [
        {
          label: "审核状态",
          prop: "auditState",
          type: "select",
          typeData: [ 
            {
              label: "全部",
              value: ""
            } ].concat(auditStatus)
        },
        {
          label: "请输入企业名称/简称",
          prop: "searchKey",
          type: "search"
        }
      ],
      tableColumns: [
        {
          title: "企业编号",
          dataIndex: "id",
          align: "center",
          width: 120
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          align: "center"
        },
        {
          title: "企业身份",
          dataIndex: "companyDirection",
          scopedSlots: { customRender: "companyDirection" },
          align: "center"
        },
        {
          title: "提交人",
          dataIndex: "userName",
          align: "center"
        },
        {
          title: "审核状态",
          dataIndex: "auditState",
          scopedSlots: { customRender: "auditState" },
          align: "center"
        },
        {
          title: "申请时间",
          dataIndex: "createDate",
          scopedSlots: { customRender: "createDate" },
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          align: "center",
          width: 120
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: [ "10", "20", "30", "40", "50", "200", "1000" ],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onSearch() {
      this.onPageOnlod();
    },
    onPageOnlod() {
      this.loading = true;
      let searchObj = this.tableSearchForm.auditState;
      if (searchObj || searchObj === 0) {
        searchObj = {
          auditState: searchObj
        };
      }
      getUserList({
        companyName: this.tableSearchForm.searchKey,
        ...searchObj,
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onView(row) {
      this.$router.push({
        name: "Company_List_Detail",
        query: {
          id: row.id,
          companyName: row.companyName,
          companyId: row.companyId
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
